<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<link href="css/app.css" rel="stylesheet" />
	</head>

	<body style="background: #FFFFFF;">
		<div class="mui-content" style="background: #FFFFFF;">
			<header class="mui-bar mui-bar-nav" style="background: #FFFFFF;">
				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
				<h1 id="title" class="mui-title">正在加载...</h1>
			</header>
		    <div id="lists" class="mui-row" style="margin-top: 45px;">
				
		    </div>
		</div>
		<script src="js/mui.js"></script>
		<script type="text/javascript">
			mui.init({
				swipeBack:true,
			})
			document.addEventListener('plusready', function(){
				getList();
			}, false );
			function getList(search_word){
				var xhr = new plus.net.XMLHttpRequest();
				xhr.onreadystatechange = function () {
				
					switch ( xhr.readyState ) {
						case 0:
							console.log( "xhr请求已初始化" );
						break;
						case 1:
							console.log( "xhr请求已打开" );
						break;
						case 2:
							console.log( "xhr请求已发送" );
						break;
						case 3:
							console.log( "xhr请求已响应");
							break;
						case 4:
							if ( xhr.status == 200 ) {
								console.log( "xhr请求成功："+xhr.responseText );
								var data = JSON.parse(xhr.responseText);
								var lists = document.getElementById("lists")
								var title = document.getElementById("title")
								
								if(data.body.length == 0){
									var html = "<p style='text-align: center;margin-top: 20px;'>视频在路上，请以后再搜索 ￣へ￣</p>";
								}else{
									var html = "";
								}
				                for(var i=0;i<data.body.length;i++){
									html+='<div class="app-bg mui-col-sm-6 mui-col-xs-4" style="padding:5px;margin-bottom:10px">'
											+'<a class="tap-to-detail" data-vid="'+data.body[i].v_id+'">'
											+'<img alt="图片已过期" src="'+data.body[i].v_pic+'">'
											+'<div class="app-title">'+data.body[i].v_name+'</div>'
											+'</a>'
											+'</div>';
											
								}
								lists.innerHTML = html;
								title.innerHTML = "搜索: "+mui.currentWebview.word
								var tap = document.getElementById("lists").getElementsByClassName('tap-to-detail');
								for(var i=0;i<tap.length;i++){
									tap[i].addEventListener('tap', function() {
								
										  //打开关于页面
										  mui.openWindow({
											url: 'detail.html', 
											id:"detail",
											extras:{
												vid:this.getAttribute("data-vid")
											}
										  });
									});
								}
							
							} else {
								console.log( "xhr请求失败："+xhr.readyState );
							}
							break;
						default :
							break;
					}
				}
				xhr.open( "GET", "http://maplephoto.me/api/index.php?act=search&data_type=json&word="+mui.currentWebview.word);
		
				xhr.send();
			}
			
		</script>
	</body>

</html>
